<template>
    <div class="app-container">
      <el-form
        :model="queryParams"
        ref="queryRef"
        :inline="true"
        label-width="auto"
        v-show="showSearch"
      >
        <el-row>
          <el-form-item label="生产单编码" prop="produceNo">
            <el-input
              v-model.trim="queryParams.produceNo"
              style="width: 180px"
              placeholder="请输入生产单编码"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <!-- <el-form-item label="出版编号" prop="pubNo">
            <el-input
              v-model.trim="queryParams.pubNo"
              style="width: 180px"
              placeholder="请输入出版编号"
              @keyup.enter="handleQuery"
            />
          </el-form-item> -->
          <el-form-item label="产品名称" prop="bookName">
            <el-input
              v-model.trim="queryParams.bookName"
              style="width: 180px"
              placeholder="请输入产品名称"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <div class="operation">
            <el-button type="primary" icon="Search" @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            <el-button @click="advanced = !advanced">
              <a style="color: #448ef7">
                <el-icon v-if="advanced">
                  <ArrowUpBold />
                </el-icon>
                <el-icon v-else>
                  <ArrowDownBold />
                </el-icon>
              </a>
            </el-button>
          </div>
        </el-row>
        <el-row v-if="advanced">
          <el-form-item label="下单日期" prop="submitDate">
            <el-date-picker
              style="width: 180px"
              v-model="queryParams.startDate"
              value-format="YYYY-MM-DD "
              type="date"
              placeholder="请选择日期"
            />
          </el-form-item>
          <!-- <el-form-item label="定价" prop="fixPrice">
            <el-input
              v-model.trim="queryParams.fixPrice"
              style="width: 180px"
              placeholder="请输入定价"
              @keyup.enter="handleQuery"
            />
          </el-form-item> -->
          <el-form-item label="书号" prop="bookNo">
            <el-input
              v-model.trim="queryParams.bookNo"
              style="width: 180px"
              placeholder="请输入书号"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item label="纸型" prop="paperType">
            <el-select
              style="width: 180px"
              filterable
              v-model="queryParams.paperType"
              placeholder="请选择纸型"
            >
              <el-option
                v-for="item in mes_paper_type"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="客户名称" prop="customName">
            <el-input
              v-model.trim="queryParams.customName"
              style="width: 180px"
              placeholder="请输入客户名称"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select
              style="width: 180px"
              filterable
              v-model="queryParams.status"
              placeholder="请选择状态"
            >
              <el-option
                v-for="item in ems_order_status"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-row>
      </el-form>
  
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" plain icon="Download" @click="handleExport"
            >导出</el-button
          >
        </el-col>
      </el-row>
      <div>
        <el-table
          height="65vh"
          v-loading="loading"
          highlight-current-row
          border
          :data="dataList"
        >
          <el-table-column label="序号" width="60" type="index" align="center" />
          <el-table-column
            label="状态"
            min-width="90"
            align="center"
            prop="status"
            v-if="columns[0].visible"
          ></el-table-column>
          <el-table-column
            label="下单日期"
            min-width="120"
            align="center"
            :show-overflow-tooltip="true"
            prop="submitDate"
            v-if="columns[18].visible"
          >
            <template v-slot="{ row }">
              {{ row.submitDate?.split("T")[0] ?? "" }}
            </template>
          </el-table-column>
          <el-table-column
            label="交货日期"
            min-width="120"
            align="center"
            prop="deliverDate"
            v-if="columns[19].visible"
          >
            <template v-slot="{ row }">
              {{ row.deliverDate?.split("T")[0] ?? "" }}
            </template>
          </el-table-column>
          <el-table-column
            label="生产单编码"
            min-width="220"
            align="center"
            prop="orderNo"
            v-if="columns[1].visible"
          >
            <template v-slot="{ row }">
              <el-button type="primary" @click.stop="handleView(row)" text>
                <span style="font-size: 16px">
                  {{ row.produceNo.slice(0, -4) }}
                </span>
                <span style="font-size: 24px">
                  {{ row.produceNo.slice(-4) }}
                </span>
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            label="出版编号"
            min-width="120"
            align="center"
            prop="pubNo"
            v-if="columns[20].visible"
          ></el-table-column>
          <el-table-column
            label="客户名称"
            min-width="120"
            align="center"
            prop="customName"
            v-if="columns[1].visible"
          ></el-table-column>
          <el-table-column
            label="文件号"
            min-width="100"
            align="center"
            prop="fileNo"
            v-if="columns[5].visible"
          ></el-table-column>
          <el-table-column
            label="书号"
            min-width="140"
            align="center"
            :show-overflow-tooltip="true"
            prop="bookNo"
            v-if="columns[6].visible"
          ></el-table-column>
          <el-table-column
            label="产品名称"
            min-width="280"
            align="center"
            prop="bookName"
            v-if="columns[4].visible"
          ></el-table-column>
          <el-table-column
            label="内文承印厂"
            min-width="100"
            align="center"
            prop="textPrinter"
            v-if="columns[15].visible"
          ></el-table-column>
          <el-table-column
            label="产品品种"
            min-width="100"
            align="center"
            prop="breedType"
            v-if="columns[8].visible"
          ></el-table-column>
          <el-table-column
            label="组成"
            min-width="100"
            align="center"
            prop="composition"
            v-if="columns[15].visible"
          ></el-table-column>
          <el-table-column
            label="印色"
            min-width="100"
            align="center"
            prop="printColor"
            v-if="columns[9].visible"
          ></el-table-column>
          <el-table-column
            label="颜色"
            min-width="100"
            align="center"
            prop="color"
            v-if="columns[10].visible"
          ></el-table-column>
          <el-table-column
            label="覆膜"
            min-width="80"
            align="center"
            prop="coverFilm"
            v-if="columns[12].visible"
          ></el-table-column>
          <el-table-column
            label="喷码"
            min-width="60"
            align="center"
            prop="marking"
            v-if="columns[13].visible"
          ></el-table-column>
          <el-table-column
            label="订单数量"
            min-width="100"
            align="center"
            prop="produceCount"
            v-if="columns[11].visible"
          >
        </el-table-column>
        <el-table-column
            label="纸型"
            min-width="100"
            align="center"
            prop="paperType"
            v-if="columns[11].visible"
          ></el-table-column>
          <el-table-column
            label="产品序列号"
            min-width="100"
            align="center"
            prop="productNo"
            v-if="columns[11].visible"
          ></el-table-column>
          <el-table-column
            label="用纸总令数"
            min-width="100"
            align="center"
            prop="totalReamAmount"
            v-if="columns[17].visible"
          >
          </el-table-column>
          <el-table-column
            label="备注"
            min-width="100"
            align="center"
            :show-overflow-tooltip="true"
            prop="remark"
            v-if="columns[17].visible"
          >
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
  </template>
  
  <script setup name="SearchCoverDetail">
  import {selectFMDetailList,exportFMDetailList} from "@/api/production/cover";
  import { downLoadBlob } from '@/utils/ruoyi'
  const { proxy } = getCurrentInstance();
  const loading = ref(true);
  const dataList = ref([]);
  const showSearch = ref(true);
  const total = ref(0);
  const advanced = ref(false);
  const urgentOpen = ref(false);
  const router = useRouter();

  // 列显隐信息
  const columns = ref([
    { key: 0, label: `状态`, visible: true },
    { key: 1, label: `生产单编码`, visible: true },
    { key: 2, label: `新/旧版`, visible: true },
    { key: 3, label: `书刊编号`, visible: true },
    { key: 4, label: `产品名称`, visible: true },
    { key: 5, label: `文件号`, visible: true },
    { key: 6, label: `书号`, visible: true },
    { key: 7, label: `定价`, visible: true },
    { key: 8, label: `产品品种`, visible: true },
    { key: 9, label: `印色`, visible: true },
    { key: 10, label: `颜色`, visible: true },
    { key: 11, label: `订单数量`, visible: true },
    { key: 12, label: `覆膜`, visible: true },
    { key: 13, label: `喷码`, visible: true },
    { key: 14, label: `联版数量`, visible: true },
    { key: 15, label: `内文承印厂`, visible: true },
    { key: 16, label: `活页烤版`, visible: true },
    { key: 17, label: `用纸总令数`, visible: true },
    { key: 18, label: `下单日期`, visible: true },
    { key: 19, label: `交货日期`, visible: true },
    { key: 20, label: `出版编号`, visible: true },
  ]);
  
  
  const data = reactive({
    queryParams: {
      pageNum: 1,
      pageSize: 50,
      type: 1,
      orderName: undefined,
      orderNo: undefined,
      fmshym: 1,
    },
  });
  const { queryParams, queryDate, rules } = toRefs(data);
  
  const { mes_paper_type, ems_order_status } =
  proxy.useDict(
    "ems_order_status",
    "mes_paper_type"
  );


  const getList = () => {
    loading.value = true;
    selectFMDetailList(queryParams.value)
      .then((res) => {
        loading.value = false;
        dataList.value = res.rows;
        total.value = res.total;
      })
      .catch((err) => {
        loading.value = false;
      });
  };
  
  // 查看
  const handleView = (row) => {
    router.push({
      path: "/production/cover/coverDetails",
      query: {
        id: row.produceId,
        info: true,
      },
    });
  };
  
  // 搜索
  const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getList();
  };
  /** 重置按钮操作 */
  const resetQuery = () => {
    proxy.resetForm("queryRef");
    handleQuery();
  };
  
// 导出
const handleExport = () => {
    exportFMDetailList(queryParams.value).then(res => {
        downLoadBlob(res, '封面生产单明细')
    })
}
  
  getList();

  </script>
  
  <style lang="scss" scoped>
  .operation {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 18px;
  }
  </style>
  